
import React from 'react';
import './header.styl'
import { Breadcrumb ,Avatar,Menu ,Dropdown} from 'antd';
import { UserOutlined,DownOutlined } from '@ant-design/icons';

import {withRouter} from 'react-router-dom';
class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            mainMenu:props.mainMenu,
            subMenu:props.subMenu,
            username:''
        }
        this.setMainMenu = this.setMainMenu.bind(this);
        this.setSubMenu = this.setSubMenu.bind(this);
        this.toAdmin = this.toAdmin.bind(this);
        let user = sessionStorage.getItem('user')?sessionStorage.getItem('user'):localStorage.getItem('user')
        if(user) {
            user = JSON.parse(user);
            this.state.username = user.username;
        }
    }
    componentWillReceiveProps(props) {
        this.setState({mainMenu:props.mainMenu,subMenu:props.subMenu});
    }
    setMainMenu() {
        if(this.state.mainMenu) {
            return (
                <Breadcrumb.Item>
                    {this.state.mainMenu}
                </Breadcrumb.Item>
            );
        }
        return '';
    }
    setSubMenu() {
        if(this.state.subMenu) {
            return (
                <Breadcrumb.Item>
                    {this.state.subMenu}
                </Breadcrumb.Item>
            );
        }
        return '';
    }
    toAdmin() {
        this.props.history.push('/admin');
    }
    loginOut() {
        sessionStorage.removeItem('user');
        localStorage.removeItem('user');
        this.props.history.push('/login');
    }
    render() {
        const menu = (
            <Menu>
              <Menu.Item key="0">
                个人中心123
              </Menu.Item>
              <Menu.Item key="1" onClick={this.loginOut.bind(this)}>
                退出登陆
              </Menu.Item>
            </Menu>
          );
        return (
            <div className="header">
                <div className="logo" onClick={this.toAdmin}>
                    小米管理系统
                </div>
                <div className="breadcrumb">
                    <Breadcrumb>
                        {
                            this.setMainMenu()
                        }
                        {
                            this.setSubMenu()
                        }
                    </Breadcrumb>
                </div>
                <div className="user">
                    <Dropdown  overlay={menu} trigger={['click']}>
                        <div onClick={e => e.preventDefault()}>
                            <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} onClick={e => e.preventDefault()}/>
                            <span className="username">{this.state.username}</span>
                        </div>
                    </Dropdown>
                </div>
            </div>
        )
    }
}

export default withRouter(Header);